<template>
    <div>
        <el-page-header @back="goBack" content="查看收款单"></el-page-header>
        <div class="common_line"></div>
        <el-form ref="addForm" :model="addForm" label-width="auto" style="margin-top: 20px;width: 85%;">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="订单类型:">
                        <div>{{ addForm.record_type_name }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户:">
                        <div>{{ customer_name }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="日期:" >
                        <div>{{ addForm.orders_date }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="经办人:">
                        <div>{{ handler_name }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form-item label="选择单据:">
                        <!-- <div @click="addOrder" class="add_order">添加单据</div> -->
                        <el-table :data="selectOrders" border style="width: 100%" :key="tableKey">
                            <el-table-column label="序号" align="center" width="60" prop="index" />
                            <el-table-column label="订单编号" align="center" prop="order_no" />
                            <!-- <el-table-column label="开单日期" align="center" prop="order_date" /> -->
                            <el-table-column v-if="addForm.record_type===1" label="未收款" align="center" prop="rightValue" />
                            <el-table-column v-if="addForm.record_type===1" label="本次收款" align="center" prop="cur_money" />
                            <el-table-column v-if="addForm.record_type===2" label="未退款" align="center" prop="rightValue" />
                            <el-table-column v-if="addForm.record_type===2" label="本次退款" align="center" prop="cur_money" />
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item :label="addForm.record_type===1?'本次收款金额:':'本次退款金额:'">
                        <div>{{ '￥'+addForm.orders_fee }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="结算账户:">
                        <div>{{ addForm.pay_type_name }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form-item label="备注:">
                        <div>{{ addForm.remark }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="fileLists&&fileLists.length">
                <div style="font-size: 14px;font-weight: bold;height: 48px;line-height: 48px;">附件</div>
                <div class="file_list">
                    <div v-for="item in fileLists" :key="'file_'+item.id" class="file" @click="downloadFile(item)">
                        {{ item.file_name }}
                    </div>
                </div>
            </el-row>
        </el-form>

        <div class="bottom" v-if="pageType&&pageType!='2'">
            <div class="btns">
                <el-button class="btn btn_primary_color" @click="dealOrder('pass')">通过</el-button>
                <el-button v-if="pageType!='3'" class="btn btn_remove_color" @click="dealOrder('unpass')">驳回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getReceivePaymentInfo } from "@/api/cooperate";
import { todoApply } from '@/api/login'

export default {
    name: 'receiveOrderQuery',
    data() {
        return {
            orderId: '',
            addForm: {
                corp: '',
                customer: '',
                handler_user: '',
                orders_date: '',
                orders_fee: '0.00',
                pay_type: 2,
                record_type: 1, //1收款--销售开单|2付款--销售退单
                remark: '',
                order_relations: []
            },
            customer_name: '',
            handler_name: '',
            payTypes: [
                {label: '微信', value: 2},
				{label: '支付宝', value: 5},
				{label: '现金', value: 1},
				{label: '银行转账', value: 3},
				{label: '其他', value: 4}
            ],
            selectOrders: [],
            tableKey: 1,
            fileLists: [],
            pageType: '',
            todoId: ''
        }
    },
    props: {
        corpId: {
            type: Number
        },
        editId: {
            type: Number
        }
    },
    watch: {
        '$route.query.bussId2': {
            immediate: true, // 首次加载时触发
            handler(newId) {
                if (newId) {
                    this.addForm.corp = this.$store.state.corpId
                    this.orderId = newId
                    this.pageType = this.$route.query.type || ''
                    this.todoId = this.$route.query.todoId || ''
                    this.getOrderInfo()
                }
            }
        }
    },
    mounted() {
        this.addForm.corp = this.corpId
        if (this.editId){
            this.orderId = this.editId
            this.getOrderInfo()
        }
    },
    methods: {
        goBack() {
            this.$emit('hidden', '')
        },
        // 处理待办
        dealOrder(type) {
            todoApply({
                todo_id: this.todoId,
                status: type=='pass'?'已通过':'驳回',
                corp_id: this.addForm.corp
            }).then(res => {
                this.$message.success('处理成功')
                this.$emit('hidden', {isRefresh: 'true'})
            })
        },
        downloadFile(item) {
            location.href = item.url_show
        },
        handlePayTypeName(val) {
            let name = ''
            this.payTypes.forEach(item => {
                if (val === item.value) {
                    name = item.label
                }
            })
            return name
        },
        // 获取详情
        getOrderInfo() {
            let _this = this
            getReceivePaymentInfo(this.orderId, {corp: this.addForm.corp}).then(res => {
                let info = res.data.data
                _this.customer_name = info.customer_detail?info.customer_detail.customer_name:''
                _this.handler_name = info.handler_user_detail?info.handler_user_detail.username:''
                info.record_type_name = info.record_type===1?'销售单':'退货单'
                info.pay_type_name = _this.handlePayTypeName(info.pay_type)
                if (info.record_type === 1){
                    _this.selectOrders = info.order_relations_detail.filter((item, index) => {
                        item.index = index+1
                        item.order_no = item.related_order_no
                        item.rightValue = item.pending_payment||0
                        item.cur_money = item.orders_fee
                        item.id = item.related_order_id
                        return item
                    })
                }else{
                    _this.selectOrders = info.return_order_relations_detail.filter((item, index) => {
                        item.index = index+1
                        item.order_no = item.related_order_no
                        item.rightValue = item.pending_payment||0
                        item.cur_money = item.orders_fee
                        item.id = item.related_order_id
                        return item
                    })
                }
                _this.addForm = info
                // 附件
                _this.fileLists = info.file_list_show || []
            })
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';
    .add_order {
        cursor: pointer;
        font-size: 14px;
        padding-left: 10px;
        color: @blue;
    }
    .order_lists {
        padding: 0 10px;
        max-height: 400px;
        overflow-y: auto;
    }
    .inner_input {
        border: 1px solid #ddd;
        padding: 8px 5px;
    }
    .file_list {
        font-size: 13px;
        padding-left: 40px;
        .file {
            cursor: pointer;
            padding-bottom: 10px;
            &:hover {
                color: @blue;
            }
        }
    }
    .bottom {
        position: fixed;
        bottom: 0;
        left: 150px;
        right: 0;
        height: 50px;
        background: #fff;
        border: 1px solid #eee; /* 边框 */
        box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.5); /* 上边框阴影 */
        display: flex;
        align-items: center;
        justify-content: end;
        .btns {
            padding: 0 30px;
            display: flex;
            align-items: center;
            gap: 12px;
            .btn {
                height: 32px;
                display: inline-flex;
                align-items: center;
            }
        }
    }
</style>